import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  final appTitle = 'Drawer Demo';
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    );
  }
}
class MyHomePage extends StatelessWidget {
  final String title;
  MyHomePage({super.key, required this.title});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title,style: TextStyle(fontSize: 25),),toolbarHeight: 60,leading: Builder(
        builder: (BuildContext context) {
          return Row(children: [
            Container(width: 10,),
            InkWell(
            child: CircleAvatar(child: CircleAvatar(radius:20,backgroundImage: AssetImage("assets/images/volume.png"),),),
            onTap: () {
              Scaffold.of(context).openDrawer();
            },
          )
          ],);
        },
      ),
      ),
      body: Center(child: ListView(
        children: [
          Padding(padding: EdgeInsets.all(48),
          child:
          ClipRRect(borderRadius: BorderRadius.circular(36),child: Image(image: AssetImage("assets/images/volume.png"),),)
          ),
        ],
      ),),
      drawer: Drawer(
        // Add a ListView to the drawer. This ensures the user can scroll
        // through the options in the Drawer if there isn't enough vertical
        // space to fit everything.
        child: ListView(
          // Important: Remove any padding from the ListView.
          padding: EdgeInsets.zero,
          children: <Widget>[
            // DrawerHeader(
            //   child: Text('Drawer Header'),
            //   decoration: BoxDecoration(
            //     color: Colors.blue,
            //   ),
            // ),
            UserAccountsDrawerHeader(accountName: Text("ArcherLee"), accountEmail: Text("liruochen01@outlook.com"),currentAccountPicture: CircleAvatar(backgroundImage: AssetImage("assets/images/volume.png"),),),
            // Container(
            //   height: 30,
            // ),
            // Container(
            //   height: 20,
            //   decoration: BoxDecoration(
            //     color: Colors.amber,
            //     borderRadius: BorderRadius.only(topLeft: Radius.circular(10),topRight: Radius.circular(10))
            //   ),
            // ),
            ListTile(
              title: Text('Item 1'),
              onTap: () {
                // Update the state of the app
                // ...
                // Then close the drawer
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: Text('Item 2'),
              onTap: () {
                // Update the state of the app
                // ...
                // Then close the drawer
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );
  }
}